<template>
	<view class="sancode-view">
		<view class="sancode-item flex-wrap-left" :class="{isdeviceShow:!deviceShow}">
			<label>设备条码:</label>
			<view class="form-input flex-space-between">
				<input class="uni-input" :disabled="isDisabled" v-model="deviceCode" confirm-type="search" @blur="iptConfirm" placeholder="请输入设备条码" />
				<image v-if="!isDisabled" class="w-44rpx h-44rpx qr-img" src="@/static/icon_qr.png" mode="" @click="!isDisabled && scanCode()"></image>
			</view>
		</view>
		<view class="flex-space-between ml-48rpx mr-48rpx device-view" v-if="deviceShow">
			<view class="text-view">
				<label for="">设备编号：</label>
				<text class="u-line-1">{{equpInfo.barcode || equpInfo.equpCode || equpInfo.equpNo ||equpInfo.specificationAndModel}}</text>
			</view>
			<view class="text-view">
				<label for="">设备名称：</label>
				<uniTooltip :content="equpInfo.equpName||equpInfo.equipmentName">
					<text class="u-line-1">{{equpInfo.equpName || equpInfo.equipmentName}}</text>
				</uniTooltip>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, watch,onMounted,reactive,defineProps, toRefs } from 'vue'
import uniTooltip from '@/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue'
const emit = defineEmits(["confirmCode"])
const props = defineProps<{
	equpInfo?:object,
	deviceCode?:string,
	isDisabled?: boolean;
	queryApi?: Function,
	data?:string//接口code
}>()
// 查询到数据信息
const deviceShow = ref<boolean>(false);
// 是否禁输
const isDisabled = toRefs(props).isDisabled;
// 接口传参
const data = toRefs(props).data;
const queryData = reactive({});

// 设备编码
const deviceCode = ref('');
// 设备信息
const equpInfo = ref({});
const scanCode = ()=> {
	 // 允许从相机和相册扫码
	 uni.scanCode({
		 success: function (res) {
			 deviceCode.value = res.result;
			 getEqupData(res.result);
		 }
	 });
}
const getEqupData = (code:string)=> {
	queryData[data.value] = code;
	props.queryApi(queryData).then(data=>{
		if(data){
			deviceShow.value = true;
			equpInfo.value = data;
			emit('confirmCode',data)
		}else{
			uni.showToast({
				title: '未查到设备信息',
				icon: 'none',
			});
			deviceShow.value = false;
			equpInfo.value = {};
			emit('confirmCode',{})
		}
		
	})
}
if(props.deviceCode){
	deviceCode.value = props.deviceCode;
	getEqupData(props.deviceCode);
}
if(Object.keys(props.equpInfo).length>1){
	equpInfo.value = props.equpInfo;
	deviceCode.value = equpInfo.value.equpNo;
	deviceShow.value = true;
}
//输入框失去焦点
const iptConfirm = (e)=>{
	if(e.detail.value){
		getEqupData(e.detail.value);
	}else{
		deviceShow.value = false;
		equpInfo.value = {};
		emit('confirmCode',{})
	}
}
</script>

<style lang="scss" scoped>
.sancode-item{
	margin:24rpx 48rpx 38rpx 48rpx ;
	label{
		width: 120rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
		line-height: 32rpx;
	}
	.form-input{
		width: calc(100% - 120rpx);
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding: 0 24rpx;
		position: relative;
		.uni-input{
			width: calc(100% - 60rpx);
		}
		.uni-input-form{
			font-size: 24rpx;
			
		}
		.uni-input-placeholder{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CACACA;
		}
		.qr-img,.date-text{
			position: absolute;
			top: 22rpx;
			right: 24rpx;
		}
		.date-text{
			color: #2F7BFF;
		}
	}

}
.device-view{
	.text-view{
		width: 50%;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
		label{
			width: 120rpx;
		}
		::v-deep .uni-tooltip{
			display: inline;
			// max-width: calc(100% - 130rpx);
		}
		text{
			display: inline-block;
			max-width: calc(100% - 130rpx);
			vertical-align: text-bottom;
		}
	}
	
}
.isdeviceShow{
	margin-bottom: 0;
}
</style>